<template>
  <div class="full" ref="domRef"></div>
</template>

<script>
import { defineComponent, nextTick, onMounted, ref } from 'vue';
import { init, graphic } from 'echarts';
export default defineComponent({
  name: 'RingChart',
  props: {
    value: {
      type: String,
      required: true,
      default: 0,
    },
  },
  setup(props) {
    const domRef = ref();

    const initChart = () => {
      const chart = init(domRef.value, 'purple');
      chart.setOption({
        series: [
          {
            type: 'gauge',
     
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              clip: false,
              itemStyle: {},
            },
            axisLine: {
              lineStyle: {
                width: 26
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: props.value,
                detail: {
                  valueAnimation: true,
                  offsetCenter: ['0%', '0%'],
                },
              },
            ],
            title: {
              fontSize: 14,
            },
            detail: {
              width: 50,
              height: 14,
              fontSize: 50,
              color: 'inherit',
              formatter: '{value}%',
            },
          },
        ],
      });
    };

    onMounted(() => {
      nextTick(() => {
        initChart();
      })
    });

    return {
      domRef,
    };
  },
});
</script>

<style lang="scss" scoped></style>
